<template>
  <view>
    <view class="uni-list">
      <radio-group @change="radioChange">
        <label class="uni-list-cell" v-for="(item, index) in items" :key="item.value">
          <view>
            <radio :value="item.value" :checked="item.checked"></radio>
          </view>
          <view>{{item.name}}</view>
        </label>
      </radio-group>
    </view>
    <button type="button" @click="submit">提交</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        items: [{
            value: 'USA',
            name: '美国'
          },
          {
            value: 'CHN',
            name: '中国',
            checked: 'true'
          },
          {
            value: 'BRA',
            name: '巴西'
          },
          {
            value: 'JPN',
            name: '日本'
          },
          {
            value: 'ENG',
            name: '英国'
          },
          {
            value: 'FRA',
            name: '法国'
          }
        ]
      };
    },
    onLoad() {
      this.newItem = {};
    },
    methods: {
      radioChange: function(evt) {
        for (let i = 0; i < this.items.length; i++) {
          if (this.items[i].value === evt.target.value) {
            this.items[i].checked = true;
            this.newItem = this.items[i];
            break;
          }
        }
      },
      submit() {
        console.log(this.newItem.name);
      }
    }

  }
</script>

<style lang="scss">
  .uni-list-cell {
    display: flex;
  }
</style>